<template>
  <div>
    <Topbar />
      <div id="app" class="container"><br><br>
        <div class="main clearfix">
            <div class="content">
                <div class="filter">
                    <div class="filter-wrapper clearfix">
                        <ul :class="text==='更多'?'filter-tag':'filter-tag extend'">
                            <li :class="cid===undefined?'on _j_tag':''" @click="changeThemes()"><a href="javascript:;">全部</a></li>
                            <li v-for="item,index in tag" :key="index" :data-tid="item.id" :class="cid=== item.id?'on _j_tag':''" @click="changeThemes(item.id)"><a href="javascript:;">{{item.name}}</a></li>
                           
                        </ul> <a href="javascript:void(0);" class="trigger _j_trigger_btn" @click="changeText">{{text}}</a>
                    </div>
                </div>
                <div class="guide-list">
                    <div class="item clearfix" v-for="item,index in content" :key="index">
                        <a href="javascript:void(0);"
                            class="_j_item" @click="toDetails(item.id)">
                            <div class="img"><img :src="item.coverUrl"></div>
                            <div class="detail">
                                <h3>{{item.title}}</h3>
                                <ul class="text">
                                    {{item.summary}}
                                </ul>
                                <div class="extra"><span class="location"><i></i>{{item.destName}}</span> <span
                                        class="view"><i></i>{{item.viewnum}}</span></div>
                            </div>
                        </a></div>
                    <div style="float: right;">
                        <div style="float: left;"><span style="line-height: 30px;"> 共{{pageNum.totalPages}}页 / {{pageNum.totalElements}}条&nbsp;&nbsp;&nbsp;</span>
                        </div>
                        <div id="pagination" class="jq-pagination" style="display: inline;">
                            
    <a  :class="[page >= pageNum.totalPages ? 'prev' : 'disabled prev']" href="javascript:void(0);" jp-role="prev" jp-data="0" @click="onFn({},--page);
                    pageIndex--;">上一页</a>
            <a
                  href="javascript:void(0);"
                  jp-role="page"
                  jp-data="1"
                  :class="[index == pageIndex ? 'active' : '']"
                  v-for="(itemPage, index) in pageNum.totalPages"
                  :key="index"
                  @click="pageFn({},itemPage);pageIndex=index"
                  >{{ itemPage }}</a
                >
    <a :class="[page == pageNum.totalPages ? 'disabled next' : 'next']" href="javascript:void(0);" jp-role="next" jp-data="2" @click="onFn({},++page);
                    pageIndex++;">下一页</a>
    <a :class="[page == pageNum.totalPages ? 'disabled last' : 'last']" href="javascript:void(0);" jp-role="last" jp-data="2" @click="lastFn({}, pageNum.totalPages);
                    page = pageNum.totalPages;
                    pageIndex = pageNum.totalPages - 1;">尾页</a></div>
                    </div>
                </div>
            </div>
            <div class="side-sales">
                <h3>本周热卖</h3>
                <ul>
                    <li><a href="javascript:;" target="_blank"><span class="image"><img
                                    src="../assets/images/wKgBEFs6E4yAPz00AAhnvJUJ1j8238.gif"></span>
                            <div title="广州长隆野生动物世界门票    随买随用 ／广州长隆旅游度假区／一票通玩 ／ 快速出票快捷入园 ／ 含空中览车及小火车/亲子乐园/赠送电子导览／自然零距离／广州长隆野生动物园"
                                class="title">
                                广州长隆野生动物世界门票 随买随用 ／广州...</div> <span class="price">¥260</span>
                        </a></li>
                    <li><a href="javascript:;" target="_blank"><span class="image"><img
                                    src="../assets/images/wKgED1wweM2AVCMFAAzr37WPWDI967.gif"></span>
                            <div title="广州长隆欢乐世界门票   当天可买／广州长隆旅游度假区／快速出票快捷入园／收藏店铺送卷送攻略／广东番禺汉溪长隆/长隆成人票／情侣票／家庭票／双人票／儿童票"
                                class="title">
                                广州长隆欢乐世界门票 当天可买／广州长隆旅...</div> <span class="price">¥187</span>
                        </a></li>
                    <li><a href="javascript:;" target="_blank"><span class="image"><img
                                    src="../assets/images/wKgED1wdwVmAVaZUADon6OL7_xw084.gif"></span>
                            <div title="当天可订/广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票（提前1天规则退）" class="title">
                                当天可订/广州长隆野生动物世界门票/长隆野生...</div> <span class="price">¥256</span>
                        </a></li>
                    <li><a href="javascript:;" target="_blank"><span class="image"><img
                                    src="../assets/images/wKgBEFrEdj-Ac-nXAAOvgGsSLJI85.jpeg"></span>
                            <div title="广州长隆水上乐园门票 一票通玩（电子票／当地必玩／免预约／超级大喇叭/热浪谷/意想不到的水上乐园）" class="title">广州长隆水上乐园门票
                                一票通玩（电子票／当地...</div> <span class="price">¥122</span>
                        </a></li>
                    <li><a href="javascript:;" target="_blank"><span class="image"><img
                                    src="../assets/images/wKgED1wk2LeAC2NJAAJQtab6Yqw67.jpeg"></span>
                            <div title="寻味广州1日游（6人小团·探黄埔军校陈家祠·电车看广州塔+沙面·西关美食秘籍·本地人带玩）" class="title">
                                寻味广州1日游（6人小团·探黄埔军校陈家祠·...</div> <span class="price">¥288</span>
                        </a></li>
                </ul>
            </div>
        </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Topbar from "../components/Topbar.vue";
import Footer from "../components/Footer.vue";
import {QueryAPI,ThemesAPI} from "@/request/api";
export default {
    data(){
        return{
            // 攻略列表数据
            content:[],
            // 攻略主题数据
            tag:[],
             text:"更多",
            // 高亮id
            cid:''||undefined,
            // 当前页码数
            page:1,
            // 页码数据
            pageNum:[],
             // 页码存索引
            pageIndex: 0,
           flag:false,
        }
    },
 components: {
    Topbar,
Footer,
  },
 async created(){
    //  请求攻略主题数据
let res1 = await ThemesAPI()
this.tag=res1.data.data
// 请求攻略列表数据
let res2 = await QueryAPI()
this.content=res2.data.data.content;
// 页码数据
this.pageNum=res2.data.data
  },
methods:{

    // 上一页
async onFn(id,page){
let res = await QueryAPI({
themeId:id,
currentPage:page
})
this.content=res.data.data.content;
},
// 点击页面切换
 async pageFn(id,page){
let res = await QueryAPI({
themeId:id,
currentPage:page
})
this.content=res.data.data.content;
},  
  // 下一页
async nextFn(id,page){
let res = await QueryAPI({
themeId:id,
currentPage:page
})
this.content=res.data.data.content;
},
// 尾页
async lastFn(id,page){
let res = await QueryAPI({
themeId:id,
currentPage:page
})
this.content=res.data.data.content;
},


// 跳转攻略详情页面
    toDetails(id) {
      this.$router.push(`/strategy_detail?id=${id}`);
    },

    // 点击攻略主题显示对应的列表数据
    async changeThemes(id){
let res = await QueryAPI({
themeId:id,
currentPage:this.page
})
this.content=res.data.data.content;
this.cid=id
    },
   async changePage(page){
let res = await QueryAPI({
currentPage:page
})
this.content=res.data.data.content;
    },
    // 点击展示更多主题
    changeText(){
        if(this.flag=!this.flag){
            this.text="收起"
        }else{
             this.text="更多"
        }
    },
}
}
</script>

<style lang="less" scoped>
a {
    background-color: transparent;
    text-decoration: none;
    color: #ff9d00;
    cursor: pointer;
}

a:hover {
    outline: 0;
    text-decoration: underline;
    color: #ff8a00;
}

.container {
    width: 1000px;
    margin: 0 auto;
}

.crumb {
    margin-bottom: 20px !important;
    height: 20px;
    padding: 15px 0;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    border-bottom: 1px solid #ededed;
}

.crumb {
    width: 1000px;
    font: 12px Arial, "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", Tahoma, Helvetica, STHeiti, "Hiragino Sans GB";
    height: 20px;
    padding: 15px 0;
    color: #666;
    line-height: 20px;
    margin: 0 auto;
}

.crumb .item {
    float: left;
}

.crumb .item.cur {
    color: #ff7000;
}

.crumb a {
    color: #666;
    font-size: 12px;
}

.crumb .item a {
    color: #666;
    font-size: 12px;
}

.crumb .item em {
    margin: 0 6px;
    color: #999;
    font-family: 'simsun';
    font-style: normal;
}

.crumb .drop {
    float: left;
}

.crumb .drop .hd {
    height: 20px;
}

.crumb .drop .hd a {
    display: block;
    height: 20px;
    _float: left;
    padding: 0 13px 0 5px;
}

.crumb .drop .bd {
    position: absolute;
    display: none;
    margin: 5px 0 0 -10px;
    _margin: 20px 0 0 -70px;
    z-index: 20;
    padding: 10px 0 8px 7px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
}

.crumb .drop .hd i {
    position: absolute;
    margin: 8px 0 0 3px;
    *margin: 4px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 3px solid #ff7000;
    border-left: 3px dashed transparent;
    border-right: 3px dashed transparent;
    overflow: hidden;
    font-size: 0;
}

.crumb .drop.open .hd a {
    background-color: #ff7000;
    color: #fff;
}

.crumb .drop.open .hd i {
    border-top-color: #fff;
}

.crumb .drop.open .bd {
    display: block;
}

.crumb .drop .bd .arrow {
    position: absolute;
    left: 20px;
    top: -6px;
    width: 0;
    height: 0;
    border-bottom: 6px solid #e5e5e5;
    border-left: 6px dashed transparent;
    border-right: 6px dashed transparent;
    font-size: 0;
}

.crumb .drop .bd .arrow b {
    position: absolute;
    left: -6px;
    top: 2px;
    width: 0;
    height: 0;
    border-bottom: 6px solid #fff;
    border-left: 6px dashed transparent;
    border-right: 9px dashed transparent;
    font-size: 0;
    overflow: hidden;
}

.crumb .drop .col {
    float: left;
    width: 145px;
}

.crumb .drop .more {
    clear: both;
    padding: 10px 20px 0 0;
    text-align: right;
}

.crumb .drop h3 {
    padding-left: 7px;
    color: #333;
}

.crumb .drop li {
    float: left;
    display: inline;
    width: 137px;
    margin: 4px 8px 0 0;
    height: 21px;
    line-height: 20px;
    overflow: hidden;
}

.crumb .drop li a {
    display: block;
    height: 21px;
    padding: 0 7px;
    color: #333;
}

.crumb .drop .more a {
    color: #ff7000;
}

.content {
    float: left;
    width: 680px;
}

.filter {
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.filter-wrapper {
    position: relative;
    width: 680px;
}

.filter-tag {
    float: left;
    width: 610px;
    text-align: center;
    height: 32px;
    overflow: hidden;
}

.filter-tag.extend {
    height: auto;
}

.filter .trigger {
    color: #ff9d00;
    line-height: 22px;
    position: absolute;
    right: 0;
    top: 0;
}

.filter-tag li {
    float: left;
    width: 89px;
    margin: 0 10px 10px 0;
    display: inline;
}

.filter-tag li a {
    display: block;
    height: 20px;
    border: 1px solid #e5e5e5;
    background-color: #f6f6f6;
    border-radius: 10px;
    color: #666;
    line-height: 20px;
}

.content .guide-list {
    float: none;
    width: auto;
}

.guide-list .item {
    margin-bottom: 35px;
}

.guide-list .item a {
    display: block;
}

.guide-list .img {
    float: left;
    display: inline;
    margin-right: 15px;
    width: 220px;
    height: 150px;
    position: relative;
    overflow: hidden;
}

.guide-list .detail {
    margin-left: 235px;
    height: 150px;
    position: relative;
}
.guide-list .detail .text{
    -webkit-line-clamp:4;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.guide-list .img span {
    position: absolute;
    left: 0;
    top: 6px;
    background-color: #ff6262;
    line-height: 25px;
    padding: 0 5px;
    color: #fff;
    font-size: 12px;
    border-radius: 0 2px 2px 0;
}

.guide-list h3 {
    position: relative;
    top: -3px;
    margin-bottom: 12px;
    font-size: 18px;
    color: #333;
    line-height: 24px;
    font-weight: normal;
}

.guide-list a:hover h3 {
    color: #ff9d00;
}

.guide-list ul {
    line-height: 22px;
    font-size: 14px;
    color: #666;
}

.guide-list li {
    height: 22px;
    overflow: hidden;
}

.guide-list li:before {
    content: '';
    float: left;
    margin: 9px 9px 0 0;
    width: 6px;
    height: 6px;
    background-color: #ff9d00;
    border-radius: 50%;
}

.guide-list .extra {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 14px;
    color: #666;
    line-height: 16px;
}

.guide-list .extra span {
    display: inline-block;
    margin-right: 20px;
}

.guide-list .location i,
.guide-list .view i {
    float: left;
    margin-right: 5px;
    display: inline-block;
    width: 14px;
    height: 16px;
    background: url(../assets/images/icon-guide.png) no-repeat 0 0;
    vertical-align: middle;
}

.guide-list .view i {
    margin-top: 1px;
    width: 18px;
    height: 14px;
    background-position: -20px 0;
}

.filter-tag li a:hover,
.filter-tag li.on a {
    text-decoration: none;
    color: #fff;
    background-color: #ffa800;
    border-color: #ffa800;
}

.crumb .drop .hd a:hover {
    text-decoration: none;
}

.crumb .drop li a:hover,
.crumb .drop li.on a {
    background-color: #fff1d7;
    color: #ff7000;
    text-decoration: none;
}

.guide-list .item a:hover {
    padding: 20px;
    margin: -20px;
    text-decoration: none;
    background-color: #f4f4f4;
}

.side-sales {
    float: right;
    width: 290px;
}

.side-sales h3 {
    font-size: 18px;
    margin: -3px 0 15px;
    font-weight: normal;
    color: #333;
    line-height: 24px;
}

.side-sales li {
    margin-bottom: 20px;
}

.side-sales li a {
    display: block;
    padding-left: 110px;
    height: 70px;
    overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}

.side-sales .image {
    float: left;
    margin-left: -110px;
    width: 100px;
    height: 70px;
    overflow: hidden;
}

.side-sales .title {
    height: 40px;
    margin-bottom: 12px;
}

.side-sales .price {
    color: #ff9d00;
}

.side-sales li a:hover {
    text-decoration: none;
}

.side-sales li a:hover .title {
    color: #ff9d00;
}
.jq-pagination {
    height: 30px;
    margin: 10px 0;

}
.jq-pagination a {
    text-decoration: none;
    border: aliceblue;
    color: #333;
    height: 24px !important;
    border-radius: 4px;
}
.jq-pagination a {
    height: 24px !important;
    display: block;
    float: left;
    padding: 0 10px;
    text-align: center;
    line-height: 24px;

}
.jq-pagination .active {
    background-color: #ff9d00;
    color: #fff;
    padding: 0 10px;
}
.jq-pagination .prev {
    background-color: #ff9d00;
}
.jq-pagination .next {
    background-color: #ff9d00;
    border-left-width: 0;
    border-right-width: 1px;
}
.jq-pagination .active.prev,
.jq-pagination .active.next {
    color: #dcdcdc;
    background: #fff;
}
.jq-pagination a:hover {
    background-color: #cde4f8;
}
.jq-pagination .active:hover {
    background-color: #6babdd;
}
.jq-pagination a.disabled {
    display: none;
}
</style>